<template>
  <!-- 详情 -->
    <el-dialog title="信息" :visible.sync="openWarehouseRateDetail" width="1200px" append-to-body :destroy-on-close="true" :before-close="beforeClose">
      <span class="ml10 font-bold">{{ spckmc }}</span>
      <div class="mb20">
        <el-table v-loading="treasureLoading" :data="treasureWarehouseRateList"  v-show="queryTreasureParams.spckid1==72">
          <af-table-column prop="astock" label="A区库存(吨)"></af-table-column>
          <af-table-column prop="astock_y" label="A区净流入(吨)"></af-table-column>
            <af-table-column prop="bstock" label="B区库存(吨)"></af-table-column>
            <af-table-column prop="bstock_y" label="B区净流入(吨)"></af-table-column>
            <af-table-column prop="ckqk" label="总库存缺口(吨)"></af-table-column>
            <af-table-column prop="czl" label="仓库出租率">
              <template slot-scope="scope">
                {{scope.row.czl + "%"}}
              </template>
            </af-table-column>
        </el-table>
      </div>
    
      <el-table v-loading="detailLoading" :data="warehouseRateDetail">
          <af-table-column prop="khmc" label="客户"></af-table-column>
          <af-table-column prop="spsl" label="库存(吨)"></af-table-column>
          <af-table-column prop="ckrl" label="包仓库存(吨)"></af-table-column>
          <af-table-column prop="ckqk" label="库存缺口(吨)"></af-table-column>
          <af-table-column prop="mjl" label="利用率(按面积)">
            <template slot-scope="scope">
              {{scope.row.mjl + "%"}}
            </template>
          </af-table-column>
          <af-table-column prop="kcl" label="利用率(按可存吨数)">
            <template slot-scope="scope">
              {{scope.row.kcl + "%"}}
            </template>
          </af-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-dialog>
</template>

<script>
import { getListTreasureWarehouseRate, getWarehouseRateDetail } from "@/api/storage/dataAnalysis/warehouseRate";

export default {
  name: "WarehouseRateDetail",
  data() {
    return {
      //表格加载
      loading: true,
      //中恒塱宝仓加载
      treasureLoading: true,
      //详情
      detailLoading:true,
      //弹窗状态
      openWarehouseRateDetail:false,
      //参数
      queryTreasureParams: {
        spckid1:"",
      },
      queryDetailParams: {
        spckid1:"",
        rqid1:"",
      },
      //仓库
      spckmc:"",
      //中恒塱宝仓列表
      treasureWarehouseRateList:[],
      //库存利用率详情
      warehouseRateDetail:[],
      //页数
      pageSize: 10,
      //页码
      pageNum:1,
      // 总条数
      total: 0,
    };
  },
  methods: {
   /** 查询中恒塱宝仓库存利用率列表 */
    getTreasureList() {
        this.treasureLoading= true
        getListTreasureWarehouseRate(this.queryTreasureParams).then(response => {
            this.treasureWarehouseRateList = response.data;
            this.treasureLoading= false
        });
    },
    /** 查询库存利用率列表 */
    getList() {
        this.detailLoading= true
        getWarehouseRateDetail(this.queryDetailParams, {pageNum:this.pageNum, pageSize:this.pageSize}).then(response => {
            const warehouseRateDetail = response.rows
            for(let i in warehouseRateDetail) {
                warehouseRateDetail[i].mjl?warehouseRateDetail[i].mjl:0
                warehouseRateDetail[i].kcl?warehouseRateDetail[i].kcl:0
            }
            this.warehouseRateDetail = response.rows
            this.total = response.total
            this.detailLoading= false
        });
    },

    /**改变窗口状态 */
    changeWarehouseRateDetail() {
      this.openWarehouseRateDetail = !this.openWarehouseRateDetail;
    },
    /** 重置数据 */
    reset() {
      Object.assign(this.$data, this.$options.data())
    },
    /**关闭弹窗 */
    beforeClose(done) {
      this.close()
      done()
    },
    /**关闭弹窗 */
    close() {
      this.changeWarehouseRateDetail()
      this.reset()
    },
    /**打开弹窗 */
    open(row, rqid) {
      this.changeWarehouseRateDetail()
      this.queryDetailParams.spckid1 = row.spckid
      this.queryDetailParams.rqid1 = rqid
      this.spckmc = row.spckmc
      this.getList()
      if(row.spckid == 72) {
        this.queryTreasureParams.spckid1 = row.spckid
        this.getTreasureList()
      }
    }
  }
};
</script>
